<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { loginAPI } from '@/api/loginAPI'
import router from '@/router'
import { useUserInfoStore } from '@/stores/useUserInfoStore'

const isLogin = ref(true)
const username = ref('')
const password = ref('')
const phoneNumber = ref('')
const validationCode = ref('')
const validationPhoneNumber = ref(false) //验证手机号码
let messageInstance = null

function showMessage(msg, type) {
    if (messageInstance) return // 已有提示在显示，不再生成新的
    messageInstance = ElMessage({
        message: msg,
        type: type,
        onClose: () => {
            messageInstance = null // 提示关闭后清空实例
        },
    })
}

const doLogin = async () => {
    const res = await loginAPI({ username: username.value, password: password.value })
    if (res.data.code === 1) {
        showMessage('登录成功', 'success')
        await useUserInfoStore().setUserInfo(res.data.data)
        localStorage.setItem('token', res.data.data.token)
        await router.push('/')
    } else {
        showMessage('登录失败', 'error')
        console.log('登录失败')
    }
}

const doRegister = async () => {
    const res = await loginAPI.register({
        username: username.value,
        password: password.value,
        phoneNumber: phoneNumber.value,
        phoneNumberCode: validationCode.value,
    })
    if (res.data.code === 1) {
        console.log(res.data)
        showMessage('注册成功', 'success')
        isLogin.value = true
    } else {
        showMessage(res.data.msg, 'error')
        console.log(res.data)
    }
}

const getValidationPhoneNumber = async () => {
    console.log(phoneNumber.value)
    if (!phoneNumber.value) {
        showMessage('请输入手机号', 'error')
        return
    }
    const res = await loginAPI.sendRegisterCode({ phoneNumber: phoneNumber.value })
    if (res.data.code === 1) {
        console.log(res.data)
        showMessage(res.data.data, 'success')
    } else {
        showMessage(res.data.msg, 'error')
        console.log('获取失败')
    }
}
</script>

<template>
    <div class="login">
        <div v-if="isLogin" class="login-container">
            <h1 class="login-title">登录</h1>
            <div style="margin-bottom: 20px">
                <div>用户名</div>
                <el-input v-model="username" style="width: 100%" placeholder="用户名" />
                <div>密码</div>
                <el-input v-model="password" style="width: 100%" placeholder="密码" />
            </div>
            <div>
                <button class="login-loginBtn" @click="doLogin()">Login</button>
            </div>
            <div>
                <button class="login-otherBtn" @click="isLogin = !isLogin">注册</button>
                <button class="login-otherBtn">其他方式登录</button>
            </div>
        </div>

        <div v-else class="register-container">
            <img
                src="@/assets/svg/turnBuck.svg"
                @click="isLogin = !isLogin"
                style="height: 28px; width: 28px; position: absolute; cursor: pointer; z-index: 200"
                alt=""
            />
            <h1 class="login-title">注册</h1>
            <div style="margin-bottom: 20px">
                <div>用户名</div>
                <el-input v-model="username" style="width: 100%" placeholder="用户名" />
                <div>密码</div>
                <el-input
                    v-model="password"
                    type="password"
                    style="width: 100%"
                    placeholder="密码"
                />
                <div>手机号/邮箱</div>
                <el-input v-model="phoneNumber" style="width: 100%" placeholder="手机号/邮箱" />
                <div style="margin-top: 5px">
                    <el-input v-model="validationCode" style="width: 70%" placeholder="验证码" />
                    <button style="width: 30%; height: 30px" @click="getValidationPhoneNumber">
                        获取
                    </button>
                </div>
            </div>
            <div v-if="validationPhoneNumber" class="validation">
                <!-- 图形验证码，我太懒了，就不做了 -->
            </div>
            <div>
                <button class="login-loginBtn" @click="doRegister()">注册</button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.login {
    min-height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.login-container {
    position: relative;
    top: -50px;
    height: 300px;
    width: 300px;
    border-radius: 15px;
    background-color: #f1f1f1;
    padding: 20px;

    .login-title {
        position: relative;
        line-height: 32px;
        font-size: 32px;
        text-align: center;
        margin-bottom: 20px;
    }

    .login-loginBtn {
        width: 100%;
        height: 40px;
        background-color: #409eff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
}

.register-container {
    position: relative;
    top: -50px;
    height: 350px;
    width: 300px;
    border-radius: 15px;
    background-color: #f1f1f1;
    padding: 20px;

    .login-title {
        position: relative;
        line-height: 32px;
        font-size: 32px;
        text-align: center;
        margin-bottom: 20px;
    }

    .login-loginBtn {
        width: 100%;
        height: 40px;
        background-color: #409eff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
}

.login-otherBtn {
    border: none;
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
}
</style>
